<template>
	<view class="modal flex align-center justify-center">
		<view class="mask" @click="maskClick">

		</view>
		<view class="inner ">
			<!-- <card>
				<view class="panel">
					<view class="title">
						{{title}}
					</view>
					<view class="content">
						<text v-if="content">{{content}}</text>
						<slot></slot>
					</view>
					<view class="btns flex"
						:class="{'justify-end':(!showCancel||!showConfirm),'justify-between':((showCancel&&showConfirm)),'justify-center':mustCenter}">
						<view class="cancel" @click="cancel" v-if="showCancel">
							{{cancelText}}
						</view>
						<view class="confirm" @click="confirm" v-if="showConfirm">
							{{confirmText}}
						</view>
					</view>
				</view>
			</card> -->

			<view class="inner_d">
				<view class="close_div" @click="close">
					<image class="closeimg" src="/static/close.png" mode="aspectFit"></image>
				</view>
				<view class="inner_d_img">
					<image class="img1" src="/static/index_activ.png" mode="aspectFit"></image>
					<!-- <image show-menu-by-longpress="true" class="img2" src="/static/index_6.png" mode="aspectFit"></image> -->
				</view>
				<!-- <view class="inner_d_msg">
					<view class="inner_d_msg2">
						长按识别二维码·联系采祁客服77777
					</view>
					<view class="inner_d_msg3">
						周-至周日 9:00-20:00
					</view>
				</view> -->
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "activ",
		props: {
			value: {
				default: false
			},
			shadeClose: {
				type: Boolean,
				default: true
			},
			title: {
				default: '提示'
			},
			content: {
				type: String,
				default: '确定执行操作吗？'
			},
			showCancel: {
				type: Boolean,
				default: true
			},
			cancelText: {
				default: '取消'
			},
			showConfirm: {
				type: Boolean,
				default: true
			},
			confirmText: {
				default: '确定'
			},
			mustCenter: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			};
		},
		methods: {
			close() {
				this.$emit('getmsg', false);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "/static/reset.scss";

	.modal {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		width: 100vw;
		height: 100vh;

		.mask {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			background: #000000;
			opacity: 0.4;
			z-index: 1;
		}

		.inner {

			position: relative;
			z-index: 2;
			top: -100rpx;

			.panel {
				width: 263*2rpx;
				padding: 24*2rpx;

				.title {
					width: 100%;
					
					font-weight: bold;
					font-size: 18*2rpx;
					line-height: 25*2rpx;
					text-align: center;
					color: #141A1E;
				}

				.content {
					font-size: 14*2rpx;
					line-height: 20*2rpx;
					color: #141A1E;
					margin-top: 16*2rpx;
				}

				.btns {
					margin-top: 16*2rpx;

					.cancel,
					.confirm {
						width: 123.5*2rpx;
						height: 44*2rpx;
						background: #F2F2F2;
						border-radius: 44*2rpx;
						font-weight: bold;
						color: #141A1E;
						text-align: center;
						line-height: 44*2rpx;
					}

					.confirm {
						background: #FE6666;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	.inner_d_img {
		position: relative;
	}

	.img1 {
		width: 640rpx;
		height: 571rpx;
	}

	.img2 {
		position: absolute;
		top: 146rpx;
		/* left: 202rpx; */
		left: 0;
		right: 0;
		text-align: center;
		margin: 0 auto;
		width: 236rpx;
		height: 236rpx;
	}

	.inner_d_msg {
		position: absolute;
		bottom: 52rpx;
		/* left: 130rpx; */
		left: 0;
		right: 0;
		text-align: center;
	}

	.inner_d_msg2 {
		margin-bottom: 8rpx;
	}

	.close_div {
		position: absolute;
		top: 100rpx;
		right: 48rpx;
		width: 38rpx;
		height: 38rpx;
		z-index: 1;
	}

	.closeimg {
		width: 38rpx;
		height: 38rpx;
	}
</style>